<template>
<div class="box" v-if="ifShow">
    <img :src="getImageUrl(url)" alt="网路错误">
    <div class="inbox">
        <h1 style="font-size: 20px;height: 10%; margin: auto" >{{ name }}</h1>
        <div style="display:flex; margin: auto;">
          <div style="line-height:32px;">数量：</div>
        <el-input-number v-model="num" :min="1" :max="10" @change="numChange" />
        </div>
    </div>
    <div class="inbox2">
        {{ price }}￥
    </div>
    <div style="width: 5%;margin-top: 6px;">
        <el-icon size="23" @click="close"> <Close /> </el-icon>
    </div>
</div>
</template>
<script lang="ts" setup>
import {ref ,defineProps,defineEmits,} from 'vue'
import {storeA} from '@/piniaStore/storeA'
let piniaStoreA = storeA()
const props = defineProps(['name', 'url', 'num','price'])
const emit = defineEmits(['del','change'])
const ifShow = ref(true)
var num = ref(props.num)
var name = props.name
var price = props.price * num.value
function getImageUrl(name: string):string{
//   return new URL(name, import.meta.url).href
console.log(new URL(name, import.meta.url).href)
    return new URL(name, import.meta.url).href;
}
function numChange(){
    console.log(num.value)
    piniaStoreA.Cartfood.forEach((item)=>{
       if( item.name.name===name){
        item.num = num.value
       }
    })
    price = props.price * num.value
    emit('change')
}
function close(){
    emit("del")
}

</script>
<style scoped>
@media(min-width: 300px){
    .box{
    height: 150px;
    width:80%;
    margin: auto;
    display: flex;
    border-radius: 10px;
    background-color:rgb(253, 255, 240);
    margin-top: 20px;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    text-align: center;
}
.inbox{
    display: flex;
    flex-direction: column;
    width: 40%;
}
.inbox h1{
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
.inbox2{
    width:20%;
    margin: auto;
    font-size:25px ;
    color: rgba(255, 0, 0, 0.761);
}
img{
height: 100%;
width: 30%;
border-radius: 10px;
}
}
@media(max-width: 300px){
    .box{
    height: 100px;
    width:80%;
    margin: auto;
    display: flex;
    border-radius: 10px;
    background-color:rgb(8, 236, 54);
    margin-top: 20px;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    text-align: center;
}
.inbox{
    display: flex;
    flex-direction: column;
    width: 40%;
}
.inbox h1{
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
.inbox2{
    width:20%;
    margin: auto;
    font-size:25px ;
    color: rgba(255, 0, 0, 0.761);
}
img{
height: 100%;
width: 30%;
border-radius: 10px;
}
}

</style>